<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="ThreeJs/css/cover.css"/>
    <meta charset="UTF-8">
    <title>3D密集架</title>
    <script src="./ThreeJs/js/three.js"></script>
    <script src="./ThreeJs/js/stats.min.js"></script>
    <script src="./ThreeJs/js/DragControls.js"></script>
    <script src="./ThreeJs/js/OrbitControls.js"></script>
    <script src="./ThreeJs/js/FirstPersonControls.js"></script>
    <script src="./ThreeJs/js/TransformControls.js"></script>
    <script src="./ThreeJs/js/dat.gui.min.js"></script>
    <script src="./ThreeJs/js/EffectComposer.js"></script>
    <script src="./ThreeJs/js/RenderPass.js"></script>
    <script src="./ThreeJs/js/OutlinePass.js"></script>
    <script src="./ThreeJs/js/FXAAShader.js"></script>
    <script src="./ThreeJs/js/CopyShader.js"></script>
    <script src="./ThreeJs/js/ShaderPass.js"></script>
    <script src="./ThreeJs/js/ThreeBSP.js"></script>
    <script src="./ThreeJs/ThreeJs_Drag.js" charset="UTF-8"></script>
    <script src="./ThreeJs/ThreeJs_Composer.js" charset="UTF-8"></script>
    <script src="./ThreeJs/Modules.js" charset="UTF-8"></script>
    <script src="./ThreeJs/js/Tween.js"></script>
    <script src="./ThreeJs/js/jquery-1.11.0.min.js"></script>
    <script src="./ThreeJs/config.js"></script>
    <script src="./frame/content.js"></script>
    <script src="./frame/configure.js"></script>
</head>
<body>

<script>

    const stats = initStats();
    let objects = [];
    let scene, camera, renderer, group, child, composer, mouse, raycaster;
    var clock = new THREE.Clock();
    var mixer, action;
    initScene();
    createContent();
    initControls();
    animate();

    //初始化场景
    function initScene() {
        //场景
        scene = new THREE.Scene();

        //相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 10000);
        camera.position.set(0, 700, 1000);

        //渲染器
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        document.body.appendChild(renderer.domElement);

        //灯光
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
        directionalLight.color.setHSL(0.1, 1, 0.95);
        directionalLight.position.set(0, 200, 0).normalize();
        scene.add(directionalLight);
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
        ambient.position.set(0, 0, 0);
        scene.add(ambient);


        //添加选中时的蒙版
        // composer = new THREE.ThreeJs_Composer(renderer, scene, camera);

        //初始化点击事件
        mouse = new THREE.Vector2();
        raycaster = new THREE.Raycaster();
        composer = new THREE.EffectComposer(renderer);
        var renderPass = new THREE.RenderPass(scene, camera);
        var selectedObjects = [];
        composer.addPass(renderPass);
        var outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
        outlinePass.edgeStrength = 5;//包围线浓度
        outlinePass.edgeGlow = 0.5;//边缘线范围
        outlinePass.edgeThickness = 2;//边缘线浓度
        outlinePass.pulsePeriod = 2;//包围线闪烁频率
        outlinePass.visibleEdgeColor.set('#ffffff');//包围线颜色
        outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色
        composer.addPass(outlinePass);
        var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
        effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
        effectFXAA.renderToScreen = true;
        composer.addPass(effectFXAA);

        document.addEventListener("mousedown", (event) => {
            event.preventDefault();
            mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
            mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;


            raycaster.setFromCamera(mouse, camera);
            // scene.children.forEach(child => {
            //     if (child instanceof THREE.Mesh) {//根据需求判断哪些加入objects,也可以在生成object的时候push进objects
            //         objects.push(child)
            //     }
            // })
            var intersects = raycaster.intersectObjects([scene], true);
           // selectedObjects = [];


            if (intersects.length > 0 && intersects[0].object.parent.type === "Group") {
                // let group2 = intersects[0].object.parent;
                //
                // // for (var i =  group2.groupId; i < group.children.length; i++) {
                // //     group.children[i].translateX(20);
                // // }
                // let selectGroup = group.children[group2.groupId];
                // selectGroup.name = "selectGroup";
                //
                // var child0 = selectGroup.children[0];
                // child0.name = "child";
                // var selectX = child0.position.x;
                // var selectY = child0.position.y;
                // var selectZ = child0.position.z;
                // console.log("xyz=" + selectX + "-" + selectY + "-" + selectZ);
                // var animationGroup = new THREE.AnimationObjectGroup(selectGroup.children);
                // animationGroup.name = "animationGroup";
                // var times = [0, 3];
                // var position_x = [0, 0, 0, 50, 0, 0];
                // var pos1_Keyframe = new THREE.KeyframeTrack('child0.position', times, position_x);
                // var duration = 3;
                // var clip = new THREE.AnimationClip('boxAnimation', duration, [
                //     pos1_Keyframe,
                // ]);
                // mixer = new THREE.AnimationMixer(selectGroup);
                // action = mixer.clipAction(clip);
                // action.setLoop(THREE.LoopOnce);
                // action.clampWhenFinished = true;
                // action.enable = true;
                // action.play();
                selectedObjects.pop();
                selectedObjects.push(group);
                outlinePass.selectedObjects = selectedObjects;//给选中的线条和物体加发光特效
            } else {
                selectedObjects.pop();
            }
        }, false);

        document.addEventListener('resize', onWindowResize, false);


    }

    //初始化模型
    function createContent() {
        //地板
        createFloor(scene);
        //左面墙
        scene.add(createCube(10, 200, 1400, 0, -1295, 100, 0, "墙面"));
        //右面墙
        scene.add(createCube(10, 200, 1400, 1, 1295, 100, 0, "墙面"));
        //后面墙
        scene.add(createCube(10, 200, 2600, 1.5, 0, 100, -700, "墙面"));
        //前面墙
        const frontWall = createCube(2600, 200, 10, 0, 0, 100, 700, "墙面");

        const objects_cube = [];
        objects_cube.push(createCube(200, 180, 10, 0, -600, 90, 700, "前门1"));
        objects_cube.push(createCube(200, 180, 10, 0, 600, 90, 700, "前门2"));
        objects_cube.push(createCube(100, 100, 10, 0, -900, 90, 700, "窗户1"));
        objects_cube.push(createCube(100, 100, 10, 0, 900, 90, 700, "窗户2"));
        objects_cube.push(createCube(100, 100, 10, 0, -200, 90, 700, "窗户3"));
        objects_cube.push(createCube(100, 100, 10, 0, 200, 90, 700, "窗户4"));
        //布尔运算
        scene.add(createCubeBsp(frontWall, objects_cube));
        //创建门
        createLeftDoor(scene, 100, 180, 2, 0, -700, 90, 700, "左门1");
        createRightDoor(scene, 100, 180, 2, 0, -500, 90, 700, "右门1");
        createLeftDoor(scene, 100, 180, 2, 0, 500, 90, 700, "左门2");
        createRightDoor(scene, 100, 180, 2, 0, 700, 90, 700, "右门2");
        //创建窗户
        createWindow(scene, 100, 100, 2, 0, -900, 90, 700, "窗户");
        createWindow(scene, 100, 100, 2, 0, 900, 90, 700, "窗户");
        createWindow(scene, 100, 100, 2, 0, 200, 90, 700, "窗户");
        createWindow(scene, 100, 100, 2, 0, -200, 90, 700, "窗户");

        //group = createFrame(scene);
        createHorizontalTrack(scene, 0, 1, -500, 1000);

        group = createFrame(scene, 50, 200, 150, -250, 100, -450, 10, "架体");

    }


    // 初始化轨迹球控件
    function initControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //启用阻尼
        controls.enableDamping = true;
        //阻尼因子
        controls.dampingFactor = 0.5;
        // 视角最小距离
        controls.minDistance = 100;
        // 视角最远距离
        controls.maxDistance = 1500;
        // controls.autoRotate = true;
        // controls.autoRotateSpeed = 0.2;
        // 最大角度
        controls.maxPolarAngle = Math.PI;
        //视角
        controls.target = new THREE.Vector3(50, 50, 0);
    }

    // 初始化性能插件
    function initStats() {
        const stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
        return stats;
    }

    // 窗口变动触发的方法
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        composer.render();
        if (mixer != null) {
            mixer.update(clock.getDelta());
        }
        stats.update();
    }


</script>
<div id="infoWrap">
    <div class="info" id="scene">
        <img src="ThreeJs/images/vr-btn-scene.png"/>
        <div class="img_desc_min">选择</div>
    </div>
    <div class="info" id="music">
        <img src="ThreeJs/images/vr-btn-music.png"/>
        <div class="img_desc_min">音乐</div>
    </div>
</div>
</body>
</html>